<template>
  <div class="container">
      123
  </div>
</template>
<script>
import api from '@/utils/api';
import * as echarts from "echarts";

export default {
  mounted() {
    this.initBaseInfo()
  },
  data() {
    return {
      countyConfigData: [],
      noticeConfig: {}
    }
  },
  methods: {
    goToOtherWeb(url){
      window.open(url, '_blank');
    },
    initCountyChartsInfo() {
      var chartDom = document.getElementById('countyConfig');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        backgroundColor: '#0e1e3e',
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}人数)'
        },
        series: [
          {
            type: 'pie',
            radius: [20, 120],
            label: {
              show: true,
              fontSize: 18,
              color: 'white'
            },
            roseType: 'area',
            itemStyle: {
              borderRadius: 5
            },
            data: this.countyConfigData
          }
        ]
      };
      option && myChart.setOption(option);
    },
    initCountyInfo() {
      api.baseInfoDetail().then(result => {
        this.countyConfigData = result.data
        this.initCountyChartsInfo()
      })
    },
    initNoticeList() {
      api.noticeList().then(result => {
        console.log(result.data)
        this.noticeConfig = {
          data: result.data.showData,
          clickData: result.data.clickData,
          headerBGC: '#2f4370',
          oddRowBGC: '#0e1e3e',
          evenRowBGC: '#003399',
          columnWidth: [50, 550],
          index: true,
          fontSize: 22
        }
      })
    },
    alertSuccess(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },
    alertError(msg) {
      this.$message({
        message: msg,
        type: 'error'
      });
    },
    initBaseInfo() {
      this.initNoticeList()
      this.initCountyInfo()
    },

  }
};
</script>
<style scoped>
.dw-span{
  color: white;
  font-size: 20px;
  cursor: pointer;
  position: relative;
}
.notice-list {
  width: 760px;
  height: 250px;
  padding-top: 60px;
  margin: 0 auto;
  border-radius: 10px;
}

.baseInfo-div-box {
  /deep/ text {
    writing-mode: vertical-rl;
    height: 100px;
  }
}

.middle-content-notice {
  min-height: 400px;
}

 .middle-content-notice /deep/ .rows ,.cell{
  border-radius: 20px;
  font-size: 20px;
}

/*.notice-div {
  width: 600px;
  height: 300px;
  margin-left: 10px;
  margin-top: 10px;
  border: 1px solid red;
}*/

.middle-content {
  min-height: 400px;
}


.bottom-content {
  min-height: 400px;
}

.top-section {
  min-height: 56px;
  text-align: center;
}

.middle-section {
  min-height: 400px;
}

.bottom-section {
  min-height: 400px;
}

.title-span {
  line-height: 56px;
  width: 100px;
  font-size: 25px;
  color: white;
  letter-spacing: 2px;
}

.title-grid-content {
  min-height: 56px;
  text-align: center;
}

.el-row {
  margin-bottom: 5px;

  &:last-child {
    margin-bottom: 0;
  }
}


.container {
  min-width: 1200px;
  display: block;
  clear: both;
}

.clearfix:after {
  clear: both
}


</style>